<%
function isPathInNavItem(currentPath, navItem) {
    // 如果该项是选中状态，返回true
    if (navItem.href === currentPath) {
        return true;
    }

    // 检查当前项是否包含在路径中（处理父级菜单）
    if (navItem.items && navItem.items.length > 0) {
        // 检查所有子项
        return navItem.items.some(subItem => {
            // 直接匹配
            if (subItem.href === currentPath) {
                return true;
            }
            // 递归检查子项的子项
            if (subItem.items) {
                return isPathInNavItem(currentPath, subItem);
            }
            return false;
        });
    }

    return false;
}

// 检查是否启用深色模式
const darkModeEnabled = locals.siteData?.feature?.darkMode?.enable;
// 获取深色模式相关的类名
const darkClasses = (classes) => darkModeEnabled ? classes : '';
%>

<header>
    <nav class="fixed top-0 w-full bg-white <%= darkClasses('dark:bg-gray-800') %> border-b z-40">
        <!-- Banner -->
        <%- include('./header-banner', { darkClasses }) %>

        <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
            <div class="flex items-center h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center flex-1 min-w-0">
                    <!-- Logo和标题 -->
                    <%- include('./header-logo', { darkClasses }) %>

                    <!-- 桌面端导航 -->
                    <%- include('./header-nav', { darkClasses, isPathInNavItem }) %>
                </div>

                <!-- 右侧工具栏 -->
                <div class="flex items-center gap-2 lg:gap-4">
                    <!-- 搜索框 -->
                    <%- include('./header-search', { darkClasses }) %>

                    <!-- 版本选择器 -->
                    <%- include('./header-version', { darkClasses }) %>

                    <!-- 桌面端主题切换按钮 -->
                    <% if (darkModeEnabled) { %>
                        <button type="button"
                                data-theme-toggle
                                class="hidden lg:flex items-center justify-center p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                            <!-- 太阳图标 -->
                            <svg class="w-5 h-5 sun-icon hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
                                </path>
                            </svg>
                            <!-- 月亮图标 -->
                            <svg class="w-5 h-5 moon-icon block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
                                </path>
                            </svg>
                        </button>
                    <% } %>

                    <!-- 语言切换器 -->
                    <% if (locals.siteData?.feature?.i18n?.enable && locals.siteData?.languages?.length > 0) { %>
                        <%- include('./language') %>
                    <% } %>

                    <!-- 仓库链接 -->
                    <div class="hidden lg:block">
                        <%- include('./repo') %>
                    </div>

                    <!-- 移动端控制区 -->
                    <div class="flex items-center gap-2 lg:hidden">
                        <!-- 深色模式切换按钮 - 只在启用时显示 -->
                        <% if (darkModeEnabled) { %>
                            <button type="button"
                                    data-theme-toggle
                                    class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700">
                                <svg class="w-6 h-6 sun-icon hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
                                    </path>
                                </svg>
                                <svg class="w-6 h-6 moon-icon block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z">
                                    </path>
                                </svg>
                            </button>
                        <% } %>

                        <!-- 移动端菜单切换 -->
                        <button type="button"
                                data-menu-toggle
                                class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 <%= darkClasses('dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700') %>">
                            <svg class="h-6 w-6 menu-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                            </svg>
                            <svg class="h-6 w-6 close-icon hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 移动端菜单 -->
        <div class="hidden lg:hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-2 border-t <%= darkClasses('dark:border-gray-700') %>">
                <% for(let item of siteData.nav) { %>
                    <a href="<%
                        let href = '';
                        if (pageData.version) {
                            href += '/' + pageData.version;
                        }
                        if (locals.siteData.feature?.i18n?.enable && pageData.language) {
                            href += '/' + pageData.language;
                        }
                        href += item.href.startsWith('/') ? item.href : '/' + item.href;
                    %><%= href %>"
                       class="block px-3 py-2 rounded-md text-base font-medium
                      <%= isPathInNavItem(pageData.noLocalePath, item)
                               ? `text-blue-600 ${darkClasses('dark:text-blue-400')} bg-blue-50/80 ${darkClasses('dark:bg-blue-900/20')}`
                               : `text-gray-700 ${darkClasses('dark:text-gray-200')} hover:text-gray-900 ${darkClasses('dark:hover:text-white')} hover:bg-gray-50 ${darkClasses('dark:hover:bg-gray-700')}`
                       %>">
                        <%= item.title %>
                    </a>
                <% } %>

                <!-- 移动端版本切换 -->
                <% if (locals.siteData.versions) { %>
                    <%- include('./header-version-mobile') %>
                <% } %>

                <!-- 移动端语言切换 -->
                <% if (locals.siteData?.feature?.i18n?.enable && locals.siteData.languages?.length > 0) { %>
                    <%- include('./language-mobile') %>
                <% } %>

                <!-- 移动端的仓库链接 -->
                <div class="px-3 py-2 border-t <%= darkClasses('dark:border-gray-700') %>">
                    <%- include('./repo') %>
                </div>
            </div>
        </div>
    </nav>
</header>